<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            text-align: center;
            margin: 20px auto;
        }

        #inputButton {
            height: 60px;
            /*background-color: #3f85ff;*/
            /*width: 200px;*/
            font-size: 30px;
            /*line-height: 30px;*/
            /*border: 4px dashed black;*/
            border-radius: 10px 10px 10px 10px;
        }

        input {
            height: 40px;
        }
    </style>
</head>
<body>
<h1>Hello，world！</h1>
<input type="button" value="复制文本" id="inputButton"/></br>
<input type="text" name="testCopyedText" placeholder="测试复制文本" id="copyInput"/>

<script>
    let h1Document = document.querySelector('h1')
    let inputBtn = document.querySelector('#inputButton')
    inputBtn.addEventListener('click', () => {
        const text = h1Document.innerText;
        copyText(text)
    })

    function copyText(text) {
        if (navigator.clipboard) {
            try {
                copyText = async (text) => {
                    await navigator.clipboard.writeText(text);
                }
            } catch (error) {
                console.error('Failed to copy text to clipboard:', error);
            }
        } else {
            copyText = (text) => {
                try {
                    const input = document.createElement('input');
                    input.setAttribute('value', text)
                    document.body.appendChild(input);
                    input.select();
                    document.execCommand('copy')
                    document.body.removeChild(input);
                } catch (error) {
                    console.error('Failed to copy text to clipboard:', error);
                }
            }
        }
        copyText(text);
    }
</script>
</body>
</html>